<template>
  <div class="ele-body ele-body-card" v-loading="fullscreenLoading">
    <!-- 顶部筛选 -->
    <el-row :gutter="15">
      <el-form ref="schoolForm" :inline="true" :model="schoolForm" label-width="80px">
        <el-form-item label="统计年度">
          <el-select
            filterable
            clearable
            v-model="schoolForm.niandu"
            @change="getAllData"
            size="small"
            placeholder="-学年统计-"
            class="ele-block">
            <el-option v-for="item in xuenianList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="统计日期">
          <el-col :span="11">
            <el-date-picker
              v-model="schoolForm.start_end"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chooseDate"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 顶部统计卡片 -->
    <el-row :gutter="15">
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div >全校运动人数</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(164px);position: relative">
            <ele-chart
              ref="visitHourChart"
              style="height: calc(160px);"
              :option="shengaopieTopOne"/>
            <div style="position: absolute;display: flex;left: 60%;top: 70%;color: #333;width: 54%;">
              <div style="display: flex;flex-direction: column;justify-content:flex-end;width: 50%;">
                <div style="margin-bottom: 10px;height: 20px;">全校运动人数</div>
                <div>全校总人数</div>
              </div>
              <div style="display: flex;flex-direction: column;justify-content:flex-end;width: 50%;">
                <div style="margin-bottom: 10px;height: 20px;">{{ analysisData.qx_yundong_num }}</div>
                <div>{{ analysisData.qx_num }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div >各运动占比</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(164px);">
            <ele-chart
              ref="visitHourChart"
              style="height: calc(160px);"
              :option="shengaopieTop"/>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div >运动总时长 <span style="color: #02AFFF;padding-left: 10px">{{analysisData.zong_time}}小时</span></div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(164px);">
            <ele-chart
              ref="visitHourChart"
              style="height: calc(160px);"
              :option="shengaopieThrid"/>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 一行 各项目参与率-->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="院系">
                <el-select
                  filterable
                  clearable
                  v-model="yunDongmentsId"
                  size="small"
                  placeholder="-请选择院系-"
                  @change="changeYuanxi($event,'yundong')"
                  class="ele-fluid">
                  <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="yuanxiPJChartOption"/>
        </el-card>
      </el-col>
    </el-row>

    <!-- 二行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="院系">
                <el-select
                  filterable
                  clearable
                  v-model="shinChangmentsId"
                  size="small"
                  placeholder="-请选择院系-"
                  @change="changeYuanxi($event,'shichang')"
                  class="ele-fluid">
                  <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="yuanxiPJydscChartOption"/>
        </el-card>
      </el-col>
    </el-row>

    <!-- 三行 柱状图 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card class="analysis-chart-card teshu-card" shadow="never" style="padding: 10px 5px 0px 0px;">

          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(324px);">
            <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
              <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
                <el-form-item label="院系">
                  <el-select
                    filterable
                    clearable
                    v-model="biLimentsId"
                    size="small"
                    placeholder="-请选择院系-"
                    @change="changeYuanxi($event,'bili')"
                    class="ele-fluid">
                    <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <ele-chart
              ref="visitHourChart"
              style="height: calc(323px);"
              :option="shengaobarTop"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 四行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="院系">
                <el-select
                  filterable
                  clearable
                  v-model="chengJimentsId"
                  size="small"
                  placeholder="-请选择院系-"
                  @change="changeYuanxi($event,'chengji')"
                  class="ele-fluid">
                  <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="yuanxiYDcjChartOption"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';

export default {
  name: 'DashboardAnalysis',
  components: {EleChart,},
  data() {
    return {
      tableData: [],
      xuenianList:[],
      // 支付笔数
      payNumData: [],
      // 销售量搜索参数
      saleSearch: {
        type: 'saleroom',
        dateType: 0,
        datetime: ''
      },
      // 销售量数据
      saleroomData: [],
      // 销售量排名数据
      saleroomRankData: [],
      // 学院
      xueYuanData:[],
      // 院系列表
      departmentsList: [],
      schoolForm:{
        niandu: '',
        nianji: '',
        begin: '',
        end: '',
        start_end:[],
        mtype:2,
      },
      formYuanxi: {
        yuanxi: '',
        date1:''
      },
      //  各院系运动人数
      yuanxi_avgsData:[],
      //  各院系人均运动时长（分钟）
      yuanxi_avgsscData:[],
      //  各院系运动成绩
      yuanxi_avgscjData:[],
      yd_zhanbiDataX:[],
      yd_zhanbiData:[],
      analysisData:{},
      yunDongmentsId:'',
      yunDongments:'',
      shinChangmentsId:'',
      shinChangments:'',
      biLimentsId:'',
      biLiments:'',
      chengJimentsId:'',
      chengJiments:'',
      fullscreenLoading:false
    };
  },
  computed: {
    //各院系运动人数
	  yuanxiPJChartOption(){
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title:{
				  text:'各院系平均分'
			  },
			  grid: {
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  legend: {},
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color =['#ff0230','#26ee5e','#00BFFF'];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val[index+1]}分`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  color:['#ff0230','#26ee5e','#00BFFF'],
			  dataset: {
				  source: this.yuanxi_avgsData
			  },
			  xAxis: {
				  type: 'category',
				  axisLabel:{
					  fontSize:12,
					  interval: 0,
					  rotate: 30
				  },
			  },
			  yAxis: { gridIndex: 0 },
			  series: [
				  {
					  type: 'line',
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' },
					  label: {
						  show: true,
						  position: 'top',
						  color:'#ff0230',
						  
					  },
				  },
				  {
					  type: 'line',
					  label: {
						  show: true,
						  position: 'top',
						  color:'#26ee5e',
						  
					  },
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' }
				  },
				  {
					  type: 'line',
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' },
					  label: {
						  show: true,
						  position: 'top',
						  color:'#00BFFF',
						  
					  },
				  }
			  ]
		  }
	  },
    //各院系人均运动时长（分钟）
    yuanxiPJydscChartOption(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title:{
          text:'各院系人均运动时长（分钟）'
        },
        grid: {
          top:'15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color =['#00BFFF'];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val[index+1]}分`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
	      color:['#00BFFF'],
        dataset: {
          source: this.yuanxi_avgsscData
        },
        xAxis: {
          type: 'category',
          axisLabel:{
            fontSize:12,
            interval: 0,
            rotate: 30
          },
        },
        yAxis: { gridIndex: 0 },
        series: [
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#00BFFF'
            },
          }
        ]
      }
    },
    //各运动成绩
    yuanxiYDcjChartOption(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title:{
          text:'各院系运动成绩'
        },
        grid: {
          top:'15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color =['#ff0230','#26ee5e','#00BFFF'];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val[index+1]}分`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
	      color:['#ff0230','#26ee5e','#00BFFF'],
        dataset: {
          source: this.yuanxi_avgscjData
        },
        xAxis: {
          type: 'category',
          axisLabel:{
            fontSize:12,
            interval: 0,
            rotate: 30
          },
        },
        yAxis: { gridIndex: 0 },
        series: [
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#ff0000'
            },
          },
          {
            type: 'line',
            label: {
              show: true,
              position: 'top',
              color:'#00ff00'
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#0000ff'
            },
          }
        ]
      }
    },
    shengaobarTop(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title:{
          text:'各运动比例'
        },
	      color:['#00BFFF'],
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color = ['#00BFFF'];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val}%`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        grid:{
          top:'20%',
        },
        xAxis: {
          type: 'category',
          data: this.yd_zhanbiDataX,
          axisLabel:{
            fontSize:12,
            interval: 0,
            rotate: 30
          },
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: [
            '比例'
          ]
        },
        series: [
          {
            label: {
              show: true,
              position: 'top',
              valueAnimation: true,
              formatter(params){
                console.log("====params",params)
                // 根据params来做判断显示
                return params.data+"%"
              }
            },
            name:'比例',
            data: this.yd_zhanbiData,
            type: 'bar'
          }
        ]
      };
    },
    shengaopieTopOne() {
      return {
        grid:{
          x:0,
          y:0,
          x2:0,
          y2:0
        },
        legend: {
          show:true,
          type: 'scroll',
          orient: 'vertical',
          x: 'right',               // 水平安放位置，默认为全图居中，可选为：
          y: 'top',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle: {
            color: '#333'    // 图例文字颜色
          },
          data: [
            '参与',
            '未参与',
          ]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['30%', '50%'],
            label: {
              show: true,
              formatter: '{b}\n{c}',
            },
            labelLine: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            itemStyle: {
              opacity: 0.7,
              margin:10,
              borderRadius: 5
            },
            data: [
              {
                value: this.analysisData.canyu_num, name: '参与',
              },
              { value: this.analysisData.no_cany, name: '未参与' ,
              },
            ],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    shengaopieTop(){
      return {
        grid:{
          x:0,
          y:0,
          x2:0,
          y2:0
        },
        legend: {
          show:true,
          type: 'scroll',
          orient: 'vertical',
          x: 'right',               // 水平安放位置，默认为全图居中，可选为：
          y: 'bottom',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle: {
            color: '#333'          // 图例文字颜色
          },
          data: [
            '男生',
            '女生',
          ]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['40%', '50%'],
            label: {
              show: true,
              formatter: '{b}\n{c} %',

            },
            labelLine: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            itemStyle: {
              opacity: 0.7,
              margin:10,
              borderRadius: 5
            },
            data: [
              {
                value: this.analysisData.man_rate, name: '男生',
              },
              { value: this.analysisData.woman_rate, name: '女生' ,
              },
            ],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    shengaopieThrid(){
      return {
        grid:{
          x:0,
          y:0,
          x2:0,
          y2:0
        },
        legend: {
          show:true,
          type: 'scroll',
          orient: 'vertical',
          x: 'right',               // 水平安放位置，默认为全图居中，可选为：
          y: 'bottom',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle: {
            color: '#333'          // 图例文字颜色
          },
          data: [
            '男生',
            '女生',
          ]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['40%', '50%'],
            label: {
              show: true,
              formatter: '{b}\n{c} 人',
            },
            labelLine: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            itemStyle: {
              opacity: 0.7,
              margin:10,
              borderRadius: 5
            },
            data: [
              {
                value: this.analysisData.man_num, name: '男生',
              },
              { value: this.analysisData.woman_num, name: '女生' ,
              },
            ],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
  },
  mounted() {
    this.getXueList();
    this.getDepartmentsList();
    this.getAllData();
  },
  methods: {
    /**
     * 图表选择院系
     * **/
    changeYuanxi(e,type){
      switch (type) {
        case 'yundong':
          console.log("====",e)
          this.yunDongmentsId= e
          this.departmentsList.forEach((item,index)=>{
            if(item.id == e){
              this.yunDongments = item.name
            }
          })
          this.getAllData();
          break;
        case 'shichang':
          console.log("====",e)
          this.shinChangmentsId= e
          this.departmentsList.forEach((item,index)=>{
            if(item.id == e){
              this.shinChangments = item.name
            }
          })
          this.getAllData();
          break;
        case 'bili':
          console.log("====",e)
          this.biLimentsId= e
          this.departmentsList.forEach((item,index)=>{
            if(item.id == e){
              this.biLiments = item.name
            }
          })
          this.getAllData();
          break;
        case 'chengji':
          console.log("====",e)
          this.chengJimentsId= e
          this.departmentsList.forEach((item,index)=>{
            if(item.id == e){
              this.chengJiments = item.name
            }
          })
          this.getAllData();
          break;
        default:
          break
      }
    },
    /**
     * 获取院系列表
     */
    getDepartmentsList() {
      this.getAllData();
      this.$http.post('/departments/getDepartmentsList', {type: this.schoolForm.type}).then(res => {
        if (res.data.code === 0) {
          this.departmentsList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 选择日期
     */
    chooseDate(e) {
      console.log("====1", e)
      this.schoolForm.begin = e[0];
      this.schoolForm.end   = e[1];
      this.getAllData();
    },
    getXueList() {
      this.$http.get('/annual/getXueList').then(res => {
        if (res.data.code === 0) {
          this.xuenianList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 获取基本的chart 数据 */
    getAllData(){
      let params = {
        ...this.schoolForm,
	      chengji_depart:this.chengJimentsId,
	      zhanbi_depart:this.biLimentsId,
	      avg_grade:this.shinChangmentsId,
	      yuanxi_avg :this.yunDongmentsId,
      }
      this.fullscreenLoading = true;
      this.$http.post('/data/duanlian',params).then(res => {
        if (res.data.code === 0) {
          this.analysisData = res.data.data;
          //   获取学院数据
          this.getxueYuanData();

        } else {
          this.$message.error(res.data.msg);
        }
        this.fullscreenLoading = false;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 学院 */
    getxueYuanData() {
      this.yuanxi_avgsData = this.analysisData.yundong_list;
      this.yuanxi_avgsscData = this.analysisData.yxrj_avg;
      this.yuanxi_avgscjData = this.analysisData.chengji_zhanbi;
      this.yd_zhanbiDataX = this.analysisData.yd_zhanbi.xAxis_data;
      this.yd_zhanbiData = this.analysisData.yd_zhanbi.series_data;
    },
  },
  activated() {
    ['visitHourChart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
}
</script>

<style scoped lang="less">
/* 统计卡片4个 */
/deep/.el-card>.el-card__header{
  font-weight: bold;
  border-bottom: none;
  font-size:18px;
  padding-left: 4px!important;

}
.analysis-chart-card-head{
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 8px;
  .el-icon-dash{
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}
/* 统计卡片 */
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
.moddile-item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-right: 20px;
  div{
    &:first-child{
      margin-bottom: 10px;
    }
  }
}
</style>
